<template>
	<div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
				<router-link :to="'/home/newsList/'+item.id">
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body">
						<h1>{{item.title}}</h1>
						<p class='mui-ellipsis'>
							<span>发表时间:{{item.add_time|dateFormat}}</span>
							<span>点击:{{item.click}}次</span>
						</p>
					</div>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {
		data() {
			return {
				newsList:[
					{id:"1",title:"幸福",add_time:new Date,click:3,img_url:"/src/image/shuijiao.jpg",zhaiyao:"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？"},
					{id:"2",title:"木屋",add_time:new Date,click:4,img_url:"/src/image/muwu.jpg",zhaiyao:"想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖."},
					{id:"3",title:"CBD",add_time:new Date,click:55,img_url:"/src/image/cbd.jpg",zhaiyao:"烤炉模式的城，到黄昏，如同打翻的调色盘一般."},
					{id:"4",title:"远眺",add_time:new Date,click:7,img_url:"/src/image/yuantiao.jpg",zhaiyao:"静静的看这个世界，最后终于疯了"},
					{id:"11",title:"幸福",add_time:new Date,click:3,img_url:"/src/image/shuijiao.jpg",zhaiyao:"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？"},
					{id:"22",title:"木屋",add_time:new Date,click:4,img_url:"/src/image/muwu.jpg",zhaiyao:"想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖."},
					{id:"33",title:"CBD",add_time:new Date,click:55,img_url:"/src/image/cbd.jpg",zhaiyao:"烤炉模式的城，到黄昏，如同打翻的调色盘一般."},
					{id:"44",title:"远眺",add_time:new Date,click:7,img_url:"/src/image/yuantiao.jpg",zhaiyao:"静静的看这个世界，最后终于疯了"},
					{id:"111",title:"幸福",add_time:new Date,click:3,img_url:"/src/image/shuijiao.jpg",zhaiyao:"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？"},
					{id:"222",title:"木屋",add_time:new Date,click:4,img_url:"/src/image/muwu.jpg",zhaiyao:"想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖."},
					{id:"333",title:"CBD",add_time:new Date,click:55,img_url:"/src/image/cbd.jpg",zhaiyao:"烤炉模式的城，到黄昏，如同打翻的调色盘一般."},
					{id:"444",title:"远眺",add_time:new Date,click:7,img_url:"/src/image/yuantiao.jpg",zhaiyao:"静静的看这个世界，最后终于疯了"},
					{id:"1111",title:"幸福",add_time:new Date,click:3,img_url:"/src/image/shuijiao.jpg",zhaiyao:"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？"},
					{id:"2222",title:"木屋",add_time:new Date,click:4,img_url:"/src/image/muwu.jpg",zhaiyao:"想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖."},
					{id:"3333",title:"CBD",add_time:new Date,click:55,img_url:"/src/image/cbd.jpg",zhaiyao:"烤炉模式的城，到黄昏，如同打翻的调色盘一般."},
					{id:"4444",title:"远眺",add_time:new Date,click:7,img_url:"/src/image/yuantiao.jpg",zhaiyao:"静静的看这个世界，最后终于疯了"}
				]
			}
		},
		created() {
			this.getNewsList()
		},
		methods:{
			getNewsList() {
				Toast("去后台获取了数据")
			}
		}
	}
</script>

<style scoped="scoped">
	.mui-table-view li h1 {
		font-size: 0.875rem;
	}
	.mui-ellipsis {
		font-size: 0.75rem;
		color: #0062CC;
		display: flex;
		justify-content: space-between;
	}
</style>
